<template>
    <el-container>
        <el-header class="header-search">
            <search-header
                :search-form="searchForm"
                :search-items="searchItems"
                :expand="expand"
                :fc-table-ref="fcTableRef"
                @expand="expand = $event"
            />
        </el-header>
        <el-main class="nopadding">
            <fc-table ref="fcTableRef" rowKey="name" :requestApi="getRoleListApi" :columns="columns"
                      :buttonItems="buttonItems">
                <template #description="scope">
                    <div v-if="scope.row.description == null">---</div>
                    <div v-else>{{ scope.row.description }}</div>
                </template>
                <template #state="scope">
                    <el-tag effect="light" :type="scope.row.state === 'normal' ? 'primary' : 'danger'">
                        {{ filter.state!.find(item => item.key === scope.row.state)?.label || scope.row.state }}
                    </el-tag>
                </template>
                <template #options="scope">
                    <el-button type="primary" icon="Edit" v-auth="'role.update'" link @click="editClick(scope.row)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确定要删除吗?" @confirm="deleteClick(scope.row)">
                        <template #reference>
                            <el-button v-auth="'role.delete'" type="danger" link>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </fc-table>
        </el-main>
        <!-- 抽屉视图 -->
        <el-drawer v-model="formViewVisible" :size="500" :with-header="false" destroy-on-close>
            <form-view v-model="formViewVisible" :roleID="selectRoleID" @success="handleFormSuccess"></form-view>
        </el-drawer>
    </el-container>
</template>

<script setup lang='ts'>
import {ref, reactive, onMounted, computed} from 'vue'
import {ColumnProps, FcTableInstance} from "@/components/fcTable/model"
import {deleteRoleApi, getRoleFilterApi, getRoleListApi} from '@/api/modules/setting.ts';
import {RoleModel} from "@/models/settingModel.ts";
import {ElMessage} from 'element-plus';
import FormView from "./components/form.vue"
import {FilterModel} from "@/models/filterModel.ts";
import SearchHeader from "@/components/lcSearch/header.vue";
import SearchInput from "@/components/lcSearch/input.vue";
import SearchSelect from "@/components/lcSearch/select.vue";

const fcTableRef = ref<FcTableInstance | null>(null);
const expand = ref(false);
// 过滤器
const filter = reactive<FilterModel>({
    state: [],
});
const loadFilters = async () => {
    const filterData = await getRoleFilterApi();
    filter.state = Object.entries(filterData.data.data.state || {}).map(
        ([key, label]) => ({key, label})
    );
};

const searchForm = reactive({
    name: null,
    state: null,
});
// 搜索参数
const searchItems = computed(() => [
    {component: SearchInput, model: 'name', props: {label: '角色名称', placeholder: '请输入角色名称'}},
    {component: SearchSelect, model: 'state', props: {label: '状态', placeholder: '请选择状态', options: filter.state}},
]);

// 表格配置项
const columns = reactive<ColumnProps<RoleModel>[]>([
    {prop: "id", label: "ID", width: 100},
    {prop: "name", label: "角色名称"},
    {prop: "tag", label: "角色标识"},
    {prop: "description", label: "备注"},
    {prop: "created_at", label: "创建时间"},
    {prop: "state", label: "状态"},
    {prop: "options", label: "操作", width: 280, fixed: "right"}
]);

const buttonItems = computed(() => [
    {auth: 'role.create', icon: 'Plus', event: addRoleClick},
]);

const formViewVisible = ref(false);
const selectRoleID = ref(0);
// 新增角色
const addRoleClick = () => {
    selectRoleID.value = 0;
    formViewVisible.value = true;
};
// 编辑信息
const editClick = (row: RoleModel) => {
    selectRoleID.value = row.id;
    formViewVisible.value = true;
};
// 删除角色
const deleteClick = async (row: RoleModel) => {
    const deleteData = await deleteRoleApi({id: row.id});
    ElMessage.success(deleteData.message);
    handleFormSuccess();
};

const handleFormSuccess = () => {
    fcTableRef.value?.reset();
};
onMounted(() => {
    loadFilters();
});

</script>